<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>海报</title>

  <style>
  	*{margin: 0;padding: 0;}
  	li{list-style: none;}
  	.top {
  		width: 100%;
  		height: 100px;
  		position: relative;
  	}
  	.top .hr {
  		width: 94%;
  		margin: 30px;
  		border: 1px solid #b0b0b0;
  	}
  	.top .title {
  		position: absolute;
  		top: 0;
  		left: 0;
  		right: 0;
  		margin: -20px auto;
  		width: 300px;
  		height: 90px;
  		background: url('images/demo3/1.jpg') no-repeat;
  		background-position: -40px -521px;
  	}
  	.section {
  		position: relative;
  		height: 700px;
  	}
  	.section .advert {
  		position:absolute;
  		left: 0;
  		right: 0;
  		width: 1000px;
  		margin: auto;
  	}
  	.section #last {
  		position: absolute;
  		top: 330px;
  		left: 0;
  		width: 40px;
  		height: 55px;
  		background: url('images/demo3/3.png') no-repeat;
  		background-position: -7px -87px;
  	}
  	.section #last:hover {
  		background-color: rgba(0,0,0,.6);
  	}
  	.section #next {
  		position: absolute;
  		top: 330px;
  		right: 0;
  		width: 40px;
  		height: 55px;
  		background: url('images/demo3/3.png') no-repeat;
  		background-position: -7px -160px;
  	}
  	.section #next:hover {
  		background-color: rgba(0,0,0,.6);
  	}
  	.section .text {
  		position: absolute;
  		top: 440px;
  		left: 0;
  		right: 0;
  		margin: auto;
  		width: 910px;
  		height: 110px;
  		background: rgba(0,0,0,.8);
  		color: #fff;
  	}
  	.text ul.present li:nth-child(1) {
  		float: left;
  		width: 235px;
  		height: 65px;
  		margin-top: 15px;
  		padding: 10px 20px 0 40px;
  		border-right: 1px solid #fff;
  		font-size: 18px;
  	}
  	.text ul.present li:nth-child(2) {
  		float: left;
  		width: 541px;
  		padding: 25px 40px 0 30px;
  		font-size: 14px;
  	}
  	ul#dot {
  		position: absolute;
  		top: 120px;
  		left: 0;
  		right: 0;
  		margin: auto;
  		width: 90px;
  	}
  	ul#dot li {
  		float: left;
		width: 10px;
		height: 10px;
		background: #dfd0d1;
  		margin-right: 10px;
		border-radius: 50%;
  	}
  
  </style>

  <script>
	window.onload = function (){
		changeImg();
		changeColor();
		
	};
	function changeImg(){
		var oLast = document.getElementById('last');
		var oNext = document.getElementById('next');
		var oImg = document.getElementById('img');
		var oUl = document.getElementById('dot');
		var aLi = oUl.getElementsByTagName('li');
		var arrUrl = ['images/demo3/2.jpg','images/demo3/4.jpg','images/demo3/2.jpg','images/demo3/4.jpg'];
		var num = 0;
		function fnTab() {
			oImg.src = arrUrl[num];
			aLi[num].style.background = "red";
		};
		fnTab();
		oLast.onclick = function () {
			aLi[num].style.background = "#dfd0d1";
			num--;
			if(num<0){
				num = arrUrl.length-1;
			}
			fnTab();
		}
		oNext.onclick = function () {
			aLi[num].style.background = "#dfd0d1";
			num++;
			if(num>=arrUrl.length){
				num = 0;
			}
			fnTab();
		}
	}
  </script>

 </head>
 <body>
	<div class='top'>
		<div class='hr'>
		</div>
		<div class='title'>
		</div>
	</div>
	
	<div class='section'>
		<div class='advert'>
			<img id='img' />
			<a id='last' href="javaScript:;"></a> 
			<a id='next' href="javaScript:;"></a>
		</div>
		<div class='text'>
			<ul class='present'>
				<li>5分钟就能搞定的时髦派对妆 秒杀大红唇和烟熏眼</li>
				<li>红唇与烟熏妆曾是派对妆的“标配”，这个过时的规则早就该打破了。今年秋冬的彩妆流行是简洁时髦的美感：一抹亮片眼影，一个出其不意的眼线，一只镇住全场的唇膏。既然能花5分钟就搞定的派对妆，为什么要花一个小时呢？</li>
			</ul>
			<div>
				<ul id='dot'>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</div>
 </body>
</html>